/**
Vite 是一个现代前端构建工具，旨在提供快速的开发体验和高效的生产构建。
  1. 什么是 Vite
  Vite 是一个由 Evan You（Vue.js 的创始人）开发的前端构建工具，利用原生 ES 模块和现代浏览器的特性，提供快速的开发和构建体验。Vite 的名字来源于法语中的“快速”。

  2. 主要特点
  - 快速启动：Vite 使用原生 ES 模块进行开发，避免了打包过程，使得项目启动速度极快。
  - 热模块替换（HMR）：在开发过程中，Vite 提供快速的热更新，修改代码后几乎瞬间反映在浏览器中。
  - 构建优化：在生产环境中，Vite 使用 Rollup 进行打包，自动进行代码拆分和优化。
  - 支持多种框架：Vite 原生支持 Vue、React、Preact、Svelte 等流行框架，且可以通过插件扩展支持更多。

  3. 安装与初始化
  要使用 Vite，可以通过 npm 或 yarn 进行安装和初始化项目：

  ```bash
  # 使用 npm
  npm init vite@latest my-project

  # 使用 yarn
  yarn create vite my-project
  ```

  在初始化过程中，可以选择项目模板（如 Vue、React 等）。

  4. 项目结构
  Vite 创建的项目通常包含以下结构：
  ```
  my-project/
  ├── index.html          # 入口 HTML 文件
  ├── src/               # 源代码目录
  │   ├── main.js        # 入口 JavaScript 文件
  │   └── App.vue        # Vue 组件（如果选择 Vue 模板）
  ├── package.json        # 项目配置文件
  └── vite.config.js      # Vite 配置文件
  ```

  5. 配置文件
  Vite 的配置文件 `vite.config.js` 用于自定义项目设置，以下是一个基本示例：

  ```javascript
  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';

  export default defineConfig({
    plugins: [vue()],
    server: {
      port: 3000, // 开发服务器端口
    },
    build: {
      outDir: 'dist', // 构建输出目录
    },
  });
  ```

  6. 开发与构建
  - 启动开发服务器：在项目目录下运行以下命令启动开发服务器：

  ```bash
  npm run dev
  ```

  - 构建项目：运行以下命令进行生产构建：

  ```bash
  npm run build
  ```

  7. 插件系统
  Vite 拥有丰富的插件生态，用户可以根据需要添加插件以扩展功能。例如，使用 `@vitejs/plugin-vue` 来支持 Vue 组件，使用 `vite-plugin-windicss` 来集成 Windi CSS。

  8. 优势与劣势
  - 优势：
    - 快速的开发体验和热更新。
    - 简单的配置和易于上手。
    - 支持多种现代框架。
    
  - 劣势：
    - 对于某些特定场景，可能需要额外配置。
    - 插件生态相对较新，某些功能可能不如 Webpack 成熟。

  9. 适用场景
  Vite 适合用于构建现代前端应用，尤其是需要快速开发和迭代的项目，适合使用 Vue、React 等框架的开发者。
 */
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()], // 配置别名
});
